<template>
    <el-card class="box-card">
		<div slot="header" class="clearfix">
			<span>填报列表</span>
		</div>
		<el-table
				:data="reportFormList"
				style="width: 100%">
			<el-table-column label="表单id">
				<template slot-scope="scope">
					<i class="el-icon-key"></i>
					<span style="margin-left: 10px">{{ scope.row.id }}</span>
				</template>
			</el-table-column>
			<el-table-column label="姓名">
				<template slot-scope="scope">
					<i class="el-icon-tickets"></i>
					<span style="margin-left: 10px">{{ scope.row.name }}</span>
				</template>
			</el-table-column>
			<el-table-column label="体温">
				<template slot-scope="scope">
					<i class="el-icon-star-on"></i>
					<span style="margin-left: 10px">{{ scope.row.bodyTemperature }}</span>
				</template>
			</el-table-column>
			<el-table-column label="填报时间">
				<template slot-scope="scope">
					<i class="el-icon-star-off"></i>
					<span style="margin-left: 10px">{{ scope.row.createTime }}</span>
				</template>
			</el-table-column>
			<el-table-column	label="风险状态">
				<template slot-scope="scope">
					<span style="margin-left: 10px">
						<el-tag type="danger" v-if="scope.row.isReachKeyArea==1 || scope.row.isTouchDangerPerson == 1">高风险</el-tag>
						<el-tag type="success" v-else>低风险</el-tag>
					</span>
				</template>
			</el-table-column>
			<el-table-column label="操作">
				<template slot-scope="scope">
					<el-dropdown>
						<el-button type="primary" size="mini">
							更多操作<i class="el-icon-arrow-down el-icon--right"></i>
						</el-button>
						<el-dropdown-menu slot="dropdown">
							<el-dropdown-item>
								<span @click="getContractInfo(scope.$index, scope.row)">
									<i class="el-icon-info"></i>详情
								</span>
							</el-dropdown-item>
						</el-dropdown-menu>
					</el-dropdown>
				</template>
			</el-table-column>
		</el-table>
		<!-- 删除合同确认框 -->
		<el-dialog
			title="确认框"
			:visible.sync="showDeleteContractDialog"
			width="30%"
			:before-close="handleDeleteContractDialogClose">
			<span>是否确认删除</span>
			<span slot="footer" class="dialog-footer">
				<el-button @click="showDeleteContractDialog = false">取 消</el-button>
				<el-button type="primary" @click="handleContractDelete">确 定</el-button>
			</span>
		</el-dialog>
		<!-- 分页 -->
		<el-pagination
			background
			layout="prev, pager, next"
			style="padding-top: 10px; text-align: center"
			:page-size="7"
			@current-change="handleCurrentChange"
			:total="contractNumber">
		</el-pagination>
		<!-- 合同详情抽屉 -->
		<el-drawer
			size="80vw"
			:visible.sync="showContractInfo"
			:before-close="beforeContractInfoDrawerClose"
			direction="rtl">
			<contract-info :contractInfo="contractInfo"/>
		</el-drawer>
		<!-- 合同创建抽屉 -->
		<el-drawer
			size="80vh"
			:before-close="beforeCreateFormClose"
			:visible.sync="showContractCreateForm"
			direction="btt">
			<contract-create-form />
		</el-drawer>
		<!-- 添加商品给合同抽屉 -->
		<el-drawer
			size="27vh"
			:visible.sync="showAddGoodsIntoContractDrawer"
			:before-close="beforeAddGoodsFormClose"
			direction="ttb">
			<add-goods-into-contract :contractId="contractId"/>
		</el-drawer>
	</el-card>
</template>

<script>
import {reportFormList, reportFormDetail} from '@/api/sale'
import ContractInfo from './Drawer/ContractInfo.vue'
import ContractCreateForm from './Drawer/ContractCreateForm.vue'
import AddGoodsIntoContract from './Drawer/AddGoodsIntoContract.vue'
	export default {
		name: 'Contract',
		data() {
			return {
				reportFormData: {
					contractName: undefined,
					fulfilled: undefined,
				},
				rules: {
					contractName: [],
					fulfilled: [],
				},
				contractNameOptions: [{
					"label": "合同1",
					"value": 1
				}, {
					"label": "合同2",
					"value": 2
				}],
				fulfilledOptions: [{
					"label": "未履行",
					"value": 0
				}, {
					"label": "正在履行",
					"value": 1
				}, {
					"label": "履行完毕",
					"value": 2
				}],
				// 删除合同确认框
				showDeleteContractDialog: false,
				// 合同详情
				contractInfo:{},
				//展示合同详情抽屉
				showContractInfo: false,
				// 展示合同创建抽屉
				showContractCreateForm: false,
				// 展示添加商品到合同抽屉
				showAddGoodsIntoContractDrawer: false,
				//总记录数
				contractNumber: 0,
				// 获取合同列表分页参数
				contractListParam:{
					startIndex: 0,
					pageSize: 7
				},
				// 合同列表
				reportFormList: [],
				// 合同ID
				contractId: undefined
			}
		},
		components: {
			// 包含组件
			ContractInfo,
			ContractCreateForm,
			AddGoodsIntoContract
		},
		methods:{
				// 获取合同列表
			getContractList(){
				reportFormList(this.contractListParam).then(res => {
					this.reportFormList = res.data.records
					this.contractNumber = res.data.total
					console.log(res);
				})
			},
			submitForm() {
				this.$refs['contractSearchForm'].validate(valid => {
					if (!valid) return
					// TODO 提交表单
				})
			},
			resetForm() {
				this.$refs['contractSearchForm'].resetFields()
			},
			// 合同删除逻辑
			handleContractDelete(){
				contractDelete({contractId: this.contractId}).then(res => {
					this.getContractList()
				})
				this.showDeleteContractDialog = false
			},
			// 打开合同删除确认框
			openDeleteContractDialog(index, row){
				this.showDeleteContractDialog = true
				this.contractId = row.contractId
			},
			// 删除合同确认框关闭前
			handleDeleteContractDialogClose(){
				this.showDeleteContractDialog = false
				this.getContractList()
			},
			// 改变页码
			handleCurrentChange(val) {
				this.contractListParam.startIndex = val - 1
				this.getContractList()
			},
		
			// 获取合同详情
			getContractInfo(index, row){
				reportFormDetail({id: row.id}).then(res => {
					this.showContractInfo = true
					this.contractInfo = res.data
					console.log(res);
				})
			},
			// 打开添加商品到合同抽屉
			openAddGoodsIntoContractDrawer(index, row){
				this.showAddGoodsIntoContractDrawer = true
				this.contractId = row.contractId
			},
			// 删除合同
			handleDelete(index, row) {
				console.log(index, row);
			},
			// 创建合同抽屉关闭前
			beforeCreateFormClose(){
				this.getContractList()
				this.showContractCreateForm = false
			},
			// 合同详情抽屉关闭前
			beforeContractInfoDrawerClose(){
				this.getContractList()
				this.showContractInfo = false
			},
			// 合同添加商品抽屉关闭
			beforeAddGoodsFormClose(){
				this.getContractList()
				this.showAddGoodsIntoContractDrawer = false
			}
		},
		computed:{
				//计算属性
				
		},
		watch:{
				//监听属性
		},
		beforeCreate() {
				//console.log('beforeCreate函数......');
		},
		beforeMount() {
				//mounted函数时页面标签的内容基本还没有渲染完成
				//console.log('====beforeMount=====begin');
				//console.log(this.$el);
				//console.log('====beforeMount=====end');
		},
		created() {
			//console.log('created函数......');
			this.getContractList()
		},
		mounted() {
				//mounted函数时页面标签的内容基本已经渲染完成时调用这个函数
				//console.log('========mounted函数========begin');
				//console.log(this.$el);
				//console.log('========mounted函数========end');
		},
		beforeDestroy() {
				//console.log('beforeDestroy函数......');
		},
		destroyed() {
				//console.log('destroyed函数......');
		},
		beforeUpdate() {
				//当数据发生改变时，在标签没有被渲染之前触发
				//console.log('beforeUpdate函数......');
		},
		updated() {
				//当数据发生改变时，在标签被渲染后触发
				//console.log('updated函数......');
		}
	}
</script>

<style scoped>
	.box-card{
		width: 100%;
		height: 100%;
		overflow: auto;
	}
</style>